<template>
<div class="student-container student-stories-wrap">
       <activity-deatil :detail="activityDeatil"></activity-deatil>
       <div class="fixed-tools-wrap">
          <div class="fixed-tools">
             <strong>支付金额：</strong>
             <strong class="money">￥{{activityDeatil.fee_description || price}}</strong>
             <button class="btn btn-primary signup-btn" 
              @click="showCart()" 
              :disabled="activityDeatil.state != 1">{{stateMap[activityDeatil.state] || '立即报名'}}</button>
          </div>
       </div>
       <div class="dialog-mask" v-if="show" @click="show = false"></div>
       <div class="affirm-card"
          :class="{'affirm-card-in':show}">
          <div>
             <span v-for="item in priceList" 
                :class="{'is-actived':currentIndex == $index}"
               @click="selectCatlog(item,$index)">{{item.sub_item}}</span>
          </div>
           <div class="count-wrap">
                <div class="modify sub" @click="subtNumber">-</div>
                <div class="modify count">{{number}}</div>
                <div class="modify add" @click="addNumber">+</div>
           </div>
           <div class="button-wrap">
              <button @click="addCart">立即报名</button>
           </div>
       </div>
</div>

</template>

<script>
    import {ACTIVITY_DETAIL,ACTIVITY_SUBITEM_LIST} from '../../api';
    import activityDeatil from '../../components/activity';
    import jskit from '../../assets/jskit';
    export default {
        data(){
            return{
               show:false,
               activityDeatil:{},
               price:0,
               priceList:[],
               currentIndex:null,
               number:1,
               catalog:{},
               stateMap:{
                  1:'立即报名',
                  2:'已结束',
                  3:'已取消',
                  4:'已删除'
               }
            }
        },
        methods:{
             showCart(){
                this.show = true;
             },
             addCart(){
              // this.$router.go({
              //   name:'activity.affirm',
              //   query:{
              //     count:this.number,
              //     id:this.catalog.id,
              //     title:this.activityDeatil.title,
              //     price:this.price,
              //     time:this.activityDeatil.start_time,
              //     location:this.activityDeatil.location,
              //     catalogName:this.catalog.sub_item
              //   }
              // })
              location.href=jskit.utils.addParam('/activity/affirm/',{
                  count:this.number,
                  id:this.catalog.id,
                  title:this.activityDeatil.title,
                  price:this.price * this.number,
                  time:this.activityDeatil.start_time,
                  location:this.activityDeatil.location,
                  catalogName:this.catalog.sub_item
              })
             },
             getPriceList(){
                this.$http.get(ACTIVITY_SUBITEM_LIST,{
                  activity_id:this.$route.params.activityId
                })
                .then(res =>{
                    if(res.data.code ==0){
                      this.priceList = res.data.data;
                      if(this.priceList.length == 1){
                        this.selectCatlog(this.priceList[0],0);
                      }
                      //this.price = this.priceList[0].price;
                    }else{
                      this.$toast.show(res.data.message);
                    }
                })
             },
             getActivityDetail(){
              const {begin,end} = this;
              this.$http.get(ACTIVITY_DETAIL,{
                activity_id:this.$route.params.activityId
              })
              .then(res =>{
                  if(res.data.code ==0){
                    this.activityDeatil = res.data.data;
                    jskit.openShare && jskit.openShare({
                      title:this.activityDeatil.title,
                      desc:this.activityDeatil.introduction.substring(0,100),
                      img:this.activityDeatil.cover_img[0]
                    })
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
             },
             selectCatlog(item,index){
                this.price = item.price;
                this.currentIndex = index;
                this.catalog = item;
             },
             addNumber(){
                this.number ++;
             },
             subtNumber(){
                this.number --;
                if(this.number == 0){
                  this.number = 1;
                }
             }
        },
        ready(){
          this.getActivityDetail();
          this.getPriceList();
        },
        components:{
          'activity-deatil':activityDeatil
        }
    }
</script>
<style lang="sass">
     @import "../../sass/detail.scss";
     .student-container{
      padding-bottom: $rem*20;
     }
     .dialog-mask{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgba(0,0,0,.4);
     }
</style>
